<template>
  <div class="app-container">
    <router-link to="category/create">
      <el-button type="success" size="small"><i class="el-icon-plus" /> 新增栏目</el-button>
    </router-link>

    <!--    <el-button style="margin-left: 5px;" type="warning" size="small" @click="showChildren"><i-->
    <!--      class="el-icon-d-caret"></i> {{ expand_word }}-->
    <!--    </el-button>-->

    <el-card class="tree_table">
      <!--      <el-table :data="categories" style="width: 100%" row-key="id" lazy :load="load" :key="expand"-->
      <!--                :default-expand-all="expand"-->
      <!--                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">-->
      <!--        <el-table-column prop="id" label="ID"></el-table-column>-->
      <!--        <el-table-column prop="image" label="缩略图">-->
      <!--          <template slot-scope="scope" v-if="scope.row.image">-->
      <!--            <img :src="scope.row.image" alt="" class="thumb">-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column prop="name" label="分类名"></el-table-column>-->
      <!--        <el-table-column label="分类商品">-->
      <!--          <template slot-scope="scope" v-if="scope.row.parent_id != 0">-->
      <!--            <el-tag>点击查看</el-tag>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column prop="sort" label="排序"></el-table-column>-->
      <!--        <el-table-column label="操作">-->
      <!--          <template slot-scope="scope">-->
      <!--            <router-link :to="{ name: 'CategoryEdit', params: { id: scope.row.id }}">-->
      <!--              <el-button size="mini" type="primary">编辑</el-button>-->
      <!--            </router-link>-->
      <!--            <el-button size="mini" id="del_one" type="danger" @click="handleDelete(scope.$index, scope.row)">删除-->
      <!--            </el-button>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--      </el-table>-->
      <tree-table v-loading="listLoading" :data="categories" element-loading-text="Loading" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border>
        <template slot="image" slot-scope="scope">
          <img v-if="scope.row.image" :src="scope.row.image" alt="" class="thumb">
          <el-tag v-else type="info">暂无图片</el-tag>
        </template>
        <template slot="cate" slot-scope="scope">
          <el-tag v-if="scope.row.parentId === 0" type="success">一级</el-tag>
          <el-tag v-else type="warning">二级</el-tag>
        </template>
        <template slot="order" slot-scope="scope">
          <el-input v-model="scope.row.sort" @change="changeSort(scope.row)" />
        </template>
        <template slot="option" slot-scope="scope">
          <router-link :to="{ name: 'CategoryEdit', params: { id: scope.row.id }}">
            <el-button size="mini" type="primary">编辑</el-button>
          </router-link>
          <el-button id="del_one" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </tree-table>
    </el-card>
  </div>
</template>

<script>
import { fetchCategoryList, changeCategorySort, deleteCategory } from '@/api/category'

export default {
  data() {
    return {
      categories: [],
      expand: false,
      changing: true,
      listLoading: true,
      columns: [
        {
          label: '分类名称',
          prop: 'name'
        },
        {
          label: '缩略图',
          type: 'template',
          template: 'image'
        },
        {
          label: '类别',
          type: 'template',
          template: 'cate'
        },
        {
          label: '排序',
          type: 'template',
          template: 'order'
        },
        {
          label: '操作',
          type: 'template',
          template: 'option'
        }
      ]
    }
  },
  computed: {
    // 计算属性
    expand_word() {
      return this.expand ? '收起分类' : '展开分类'
    }
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    // 展开、收起
    showChildren() {
      this.expand = !this.expand
      this.changing = false
      this.$nextTick(function() {
        this.changing = true
      })
    },
    getCategoryList() {
      this.listLoading = true
      fetchCategoryList().then((res) => {
        if (res.code !== 20000) return this.$message.error(res.message)
        this.categories = res.data.categories
        this.listLoading = false
      })
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve()
      }, 1000)
    },
    changeSort(row) {
      changeCategorySort(row.id, { sort: row.sort }).then((res) => {
        if (res.code === 20000) {
          this.getCategoryList()
          return this.$message.success(res.message)
        }
        return this.$message.error(res.message)
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteCategory(row.id).then((res) => {
          if (res.code === 20000) {
            this.getCategoryList()
            this.$message({
              type: 'success',
              message: res.message
            })
          } else {
            this.$message({
              type: 'info',
              message: res.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.tree_table {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  margin-top: 15px;
}

.thumb {
  width: 80px;
  height: 60px;
}

#del_one{
  margin-left: 10px;
}
</style>
